<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../../css/public.css" media="all" rel="stylesheet">
    <link href="../../css/diy/form1.css" rel="stylesheet">
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/template-web.js"></script>
    <script src="../../js/lay-module/layuimini/miniTab.js"></script>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        body{
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
<div style="background-color: #FFFFFF;height: 200px;border-radius: 15px;border: 1px solid rgba(175,173,173,0.42)">
    <div style="padding-left: 40px;padding-top:15px;">
        <img height="25" loading="lazy" src="../../images/shouzuo.png" width="25">
        <span>按条件进行检索</span>
    </div>
    <hr>
    <form class="layui-form" style="padding-top: 30px" action="" lay-filter="example">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称：</label>
            <div class="layui-input-inline">
                <input autocomplete="off" class="layui-input" name="commtityName" placeholder="请输入" type="text">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">品牌名称：</label>
            <div class="layui-input-inline">
                <select name="brandId" id="brand"   lay-search></select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">类别筛选：</label>
            <div class="layui-input-inline">
                <select name="kindId" id="selectID" lay-search></select>
            </div>
        </div>

        <div class="layui-form-item"style="margin-left: 1000px;margin-top: -30px">
            <label class="layui-form-label">商品状态</label>
            <div class="layui-input-block">
                <input type="radio" name="static" value="0" title="启用">
                <input type="radio" name="static" value="1" title="停用">
                <input type="radio" name="static" value="2" title="全部" checked="">
            </div>
        </div>
        <div class="layui-form-item" id="selectBtn">
            <div class="layui-input-block">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-normal" id="selectwhereBtn" type="button">查询
            </button>
                <button class="layui-btn layui-btn-primary  layui-btn-sm" type="reset">重置</button>
            </div>
        </div>

    </form>
</div>
<div id="commditytable" style="height: auto">
    <div style="margin-left: -30px">
        <div style="padding-left: 119px;padding-top: 45px">
            <img height="25" loading="lazy" src="../../images/table.png" width="25">
            <span>商品列表</span>
            <button class="layui-btn layui-btn-primary layui-btn-sm " id="addBtn">添加</button>
        </div>
        <div style="width: 1650px">
            <table class="layui-table table-date" id="Tabledemo" lay-filter="commditytest"></table>
        </div>
    </div>
</div>
<script id="forwordkind" type="text/template">
    <option value="">输入检索</option>
    {{each datebatekind value}}
    {{if value.upname==null||value.upname==""}}
    <option value={{@value.id}}>{{@value.name}}</option>
    {{else}}
    <option value={{@value.id}}>{{@value.upname}}/{{@value.name}}</option>
    {{/if}}
    {{/each}}
</script>

<!--品牌类别-->
<script id="forwordBrand" type="text/template">
    <option value="">输入检索</option>
    {{each datebate value}}
    <option value={{@value.id}}>{{@value.name}}</option>
    {{/each}}
</script>

</body>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var miniTab = layui.miniTab;
        $("#addBtn").on('click', function () {
            miniTab.openNewTabByIframe({
                href: "page/commodity/Addcommotity.html",
                title: "商品添加",
            });
        })

         //获取类别列表
        $.get("/kind/getList", function (result) {
            if (result.code==0){
                date = {datebatekind: result.data}
                mera = template("forwordkind", date);
                $("#selectID").append(mera);
                form.render('select');
            }
        })
        /**
         * 获取品牌列表
         */
        $.get("/brand/getList", function (result) {
            if (result.code==0){
                date = {datebate: result.data}
                mera = template("forwordBrand", date);
                $("#brand").append(mera);
                form.render('select');
            }
        })
    });

</script>
<script id="img" type="text/html">
    <div>
        <img src="{{d.exampleImage1}}">
    </div>
</script>
<script id="barlist" type="text/html">
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs " lay-event="byid">查看</a>
<!--    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs " lay-event="query">编辑</a>-->
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="switchTpl">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="sexDemo" {{ d.statics == 0 ? 'checked' : '' }}>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var miniTab = layui.miniTab;
       var layer=layui.layer;
       var form = layui.form;
        table.render({
            elem: '#Tabledemo'
            , method: 'post'
            , title: '商品数据表'
            , url: '/commodity/page' //数据接口
            , page: {theme:'#1E9FFF'} //开启分页
            , limit: 10
            ,toolbar:true
            ,defaultToolbar: ['filter', 'exports',{
                title: '商品数据表'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,contentType:'application/json'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records//解析数据列表
                };
            }
            , cols: [[ //表头
                {type: 'numbers', title: '序号'}
                , {field: 'name', title: '商品名称',}
                , {field: 'exampleImage1',title: '商品样图', templet: '#img'}
                , {field: 'price', title: '商品价格'}
                , {field: 'kindName', title: '商品类别', sort: true}
                , {field: 'brandName', title: '品牌',  sort: true}
                , {field: 'stock', title: '库存',  sort: true}
                , {field: 'createTime', title: '创建时间', sort: true}
                ,{field:'statics', title:'状态',width : 100, templet: '#switchTpl', unresize: true}
                , {fixed: 'right', title: '操作', toolbar: '#barlist'}
            ]]
        });
        //监听工具条
        table.on('tool(commditytest)', function (obj) {
            var data = obj.data;
            if (obj.event === 'query') {
                $.get("/setThisID", {"thisID": data.id}, function (ex) {
                    miniTab.openNewTabByIframe({
                        href: "page/commodity/AllcommotitySpecs.html",
                        title: data.c_name + "下的商品规格",
                    });
                })
            } else if (obj.event === 'del') {
                layer.confirm('真的删除该商品？', function (index) {
                    $.get("/commodity/del", {"id": data.id}, function (ex) {
                        if (ex.code==0) {
                            obj.del();
                            layer.close(index);
                        } else {
                            layer.msg(ex.msg)
                        }
                    })
                });
            }else if (obj.event==='byid') {
                /**
                 * 查看
                 */
                layer.open({
                    type: 2,
                    title: '商品规格详情',
                    fixed: false, //不固定
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1200px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'SpeceCommotityById.html?id='+data.id
                });
            }
        });
        var statics;
        form.on('switch(sexDemo)', function(obj){
            if (obj.elem.checked===true) {
                statics=0;
            }else {
                statics=1;
            }
            var data={
                "id":this.value,
                "statics":statics
            }
            $.ajax({
                type : "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                dataType: "json",
                url:"/commodity/update",
                async : true,
                success : function(date){
                    if (date.code==0) {
                        layer.msg(date.msg);
                    }else {
                        layer.msg(date.msg, {icon: 5});
                    }
                }
            })
        });
    })
</script>
<script>
    layui.use(['form','table'], function () {
        var tablewhere = layui.table;
         var form=layui.form;

        layui.$('#selectwhereBtn').on('click', function(){
            var data = form.val('example');
                var commodity={
                    "name":data.commtityName,
                    "brandId":data.brandId,
                    "kindId":data.kindId,
                    "statics":data.static
                }
                tablewhere.render({
                    elem: '#Tabledemo'
                    , method: 'post'
                    , size: 'lg'
                    , url: '/commodity/page'
                    , contentType: "application/json; charset=utf-8"
                    , where: commodity
                    , id: 'testReload'
                    , page: {theme:'#1E9FFF'} //开启分页
                    , limit: 10
                    ,toolbar:true
                    ,defaultToolbar: ['filter', 'exports',{
                        title: '商品数据表'
                        ,layEvent: 'LAYTABLE_TIPS'
                        ,icon: 'layui-icon-tips'
                    }]
                    ,parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.records//解析数据列表
                        };
                    }
                    , cols: [[ //表头
                        {type:'numbers',title:'序号'}
                        , {field: 'name', title: '商品名称'}
                        , {field: 'exampleImage1', title: '商品样图', templet: '#img', sort: true}
                        , {field: 'price', title: '商品价格'}
                        , {field: 'kindName', title: '商品类别'}
                        , {field: 'brandName', title: '品牌'}
                        , {field: 'stock', title: '库存', sort: true}
                        ,{field:'statics', title:'状态',width : 100, templet: '#switchTpl', unresize: true}
                        , {field: 'createTime', title: '创建时间', sort: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barlist'}
                    ]]
                });
                active = {
                    reload: function () {
                        var demoReload = $('#demoReload');
                        //执行重载
                        tablewhere.reload('testReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                };
        });
    })
</script>
</html>